<template>
  <div style="background: #ffffff">
    <!-- 步骤条 -->
    <a-spin :spinning="loading">
      <a-card>
        <a-steps progressDot :current="stepIndex" style="padding: 10px" size="default">
          <template v-if="resultObj.bpmLogListCount >3">
            <a-step>
              <template slot="title">
                <div class="task-title">...</div>
              </template>
            </a-step>
          </template>
          <template v-for="(item,index) in resultObj.bpmLogStepList">
            <a-step>
              <template slot="title">
                <div class="task-title">{{ item.taskName }}</div>
              </template>
              <template slot="description">
                <div class="task-date" style="text-align: left"><span><j-ellipsis :length="15" :value="'办理时间：'+ item.opTime"></j-ellipsis></span></div>
                <div class="task-user" style="text-align: left"><span> 操作人：{{ item.opUserName }}</span></div>
              </template>
            </a-step>
          </template>
          <a-step v-if="resultObj.taskName&&resultObj.taskName!=''">
            <template slot="title">
              <div class="task-title">{{ resultObj.taskName }}</div>
            </template>
            <template slot="description">
              <div class="task-date" style="text-align: left"><span style="color: #ff6d75;"><j-ellipsis :value="'开始时间：'+ resultObj.taskNameStartTime"></j-ellipsis></span></div>
              <div class="task-user" style="text-align: left"> 操作人：{{ resultObj.taskAssigneeName }}</div>
            </template>
          </a-step>
          <a-step>
            <template slot="title">
              <div class="task-title">...</div>
            </template>
          </a-step>
        <!--<a-step>
          <template slot="title">
            <div class="task-title"></div>
          </template>
        </a-step>-->
        </a-steps>
      </a-card>
      <a-card>
        <!--附加单据-->
        <slot />
      </a-card>
      <!-- 意见 -->
      <a-card title="意见信息" :bodyStyle="{padding:'0 20px'}" size="default" style="margin-top:20px" >
        <a-list itemLayout="vertical">
          <template v-for="(item,index) in resultObj.bpmLogList">
            <a-list-item >
              <a-list-item-meta :description="item.remarks">
                <a slot="title">{{ item.opUserName }}<span style="color: #ff6d75;">[{{ item.taskName }}]</span> {{ item.opTime }}</a>
                <a-avatar slot="avatar" :size="36" icon="user" style="background-color: #51cbff;"></a-avatar>
              </a-list-item-meta>
              <template v-for="(file,index) in item.bpmFiles">
                <div class="ant-upload-list ant-upload-list-text">
                  <div class="ant-upload-list-item ant-upload-list-item-done">
                    <div class="ant-upload-list-item-info">
                      <span>
                        <a-icon type="paper-clip" />
                        <a target="_blank" rel="noopener noreferrer" :title="file.fileName" :href="getFileDownloadUrl(file.filePath)" style="padding:0 10px 0 20px;">{{ file.fileName }}</a>
                        <a-icon type="eye" style="cursor:pointer" @click="onPreview(file)" />
                      </span>
                    </div>
                  </div>
                </div>
              </template>
            </a-list-item>
          </template>
          <a-list-item>
          </a-list-item>
          <a-list-item>
            <div style="width: 100%;">
              <div style="margin-bottom: 5px">
                处理意见：
              <!-- <a-select style="width: 300px" placeholder="常用审批语" :getPopupContainer = "(target) => target.parentNode" @change="handleChangeSelect">
                <a-icon slot="suffixIcon" type="smile" />
                <a-select-option v-for="(item, key) in remarksDictOptions" :key="key" :value="item.value">{{ item.text }}</a-select-option>
              </a-select> -->
              </div>
              <a-textarea rows="3" v-model="model.reason" />
            </div>
          </a-list-item>
          <a-list-item>
            <j-upload text="添加文件" v-model="fileList" :returnUrl="false"></j-upload>
          </a-list-item>
          <template v-if="model.isSubmit !== '1'">
            <a-list-item >
              <a-row>
                <a-col :span="24">
                  <!-- <a-radio-group  v-model="model.processModel">
                <a-radio :checked="true" :value="1">单分支模式</a-radio>
                <a-radio :value="2">多分支模式</a-radio>
                <a-radio :value="3"  v-if="resultObj.histListSize>0">退回至历史审批节点</a-radio>
              </a-radio-group> -->
                  <a-list-item v-if="resultObj.isRejectNode=='1' && resultObj.histListSize>0 && !currTask.suspendFlag">
                    <a-checkbox :checked="checkedReject" @change="handleCheckedRejectNode">退回至历史审批节点</a-checkbox>
                    <span :hidden="this.model.processModel!==3" v-if="resultObj.rejectNodeTask.length>0">
                      <a-select v-model="model.rejectModelNode" :getPopupContainer="(target) => target.parentNode" style="width:250px">
                        <template v-for="(item,index) in resultObj.rejectNodeTask">
                          <a-select-option v-if="item.NAME_ != resultObj.taskName " :value="item.TASK_DEF_KEY_">{{ item.NAME_ }}</a-select-option>
                        </template>
                      </a-select>
                    </span>
                  </a-list-item>
                  <!-- <span :hidden="this.model.processModel!==2">
              <a-list-item v-if="resultObj.isRejectNode=='1' && resultObj.histListSize>0 && !currTask.suspendFlag">
                <a-checkbox :checked="checkedReject" @change="handleCheckedRejectNode">退回至历史审批节点</a-checkbox>
                <span :hidden="this.model.processModel!==3" v-if="resultObj.rejectNodeTask.length>0">
                  <a-select v-model="model.rejectModelNode" :getPopupContainer = "(target) => target.parentNode" style="width:250px">
                    <template v-for="(item,index) in resultObj.rejectNodeTask">
                      <a-select-option v-if="item.NAME_ != resultObj.taskName " :value="item.TASK_DEF_KEY_">{{ item.NAME_ }}</a-select-option>
                    </template>
                  </a-select>
                </span>
              </a-list-item>-->
<!--              <a-list-item v-if="!currTask.suspendFlag">-->
<!--                <a-checkbox :checked="checkedCounterSign" @change="handleCheckedCounterSign">加签审批</a-checkbox>-->
<!--                <template v-if="checkedCounterSign">-->
<!--                  <span>指定加签人：</span>-->
<!--                  &lt;!&ndash; <a-input style="width: 200px;" v-model="model.counterSignUserName"></a-input> &ndash;&gt;-->
<!--                  <a-select style="width: 300px;"-->
<!--                    mode="multiple"-->
<!--                    placeholder="请选择用户"-->
<!--                    v-model="hqUserList"-->
<!--                    :allowClear="false"-->
<!--                    :open="false"-->
<!--                    :disabled="true"-->
<!--                  >-->
<!--                    <a-select-option v-for="(item,index) in hqUserSelectList" :key="item.realname">-->
<!--                      {{ item.realname }}-->
<!--                    </a-select-option>-->
<!--                  </a-select>-->
<!--                  <a-button type="primary" @click="handleHqUserSelect" icon="search" style="margin-left: 8px">选择</a-button>-->
<!--                  <a-button type="primary" @click="hqUserSelectReset" icon="reload" style="margin-left: 8px">清空</a-button>-->
<!--              </template>-->
                <!-- <span :hidden="this.model.processModel!==3" v-if="resultObj.rejectNodeTask.length>0">
                  <a-select v-model="model.rejectModelNode" :getPopupContainer = "(target) => target.parentNode" style="width:250px">
                    <template v-for="(item,index) in resultObj.rejectNodeTask">
                      <a-select-option v-if="item.NAME_ != resultObj.taskName " :value="item.TASK_DEF_KEY_">{{ item.NAME_ }}</a-select-option>
                    </template>
                  </a-select>
                </span> -->
<!--              </a-list-item>-->
              <!-- <span :hidden="this.model.processModel!==2">
                <span style="color: red;">多分支模式默认执行所有分支：</span>
                &lt;!&ndash;<a-checkbox-group v-model="transition" >&ndash;&gt;
                <template v-for="(item,index) in resultObj.transitionList">
                  <a-checkbox :checked="true" :value="item.nextnode">{{ item.Transition }}</a-checkbox>
                </template>
                &lt;!&ndash; </a-checkbox-group>&ndash;&gt;
              </span> -->

                </a-col>
              </a-row>
            </a-list-item>
            <!-- <a-list-item>
          <a-checkbox :checked="checkedNext" @change="handleCheckedNextChange">指定下一步操作人（指定下一步会签人员）</a-checkbox>
          <a-checkbox :checked="checkedCc" @change="handleCheckedCcChange">是否抄送</a-checkbox>
        </a-list-item>
        <a-list-item style="line-height: 32px" :hidden="!checkedNext">
          <span>指定下一步操作人（指定下一步会签人员）：</span>
          &lt;!&ndash;<a-input style="width: 200px;" v-model="model.nextUserName"></a-input>&ndash;&gt;
          <a-select style="width: 300px;"
            mode="multiple"
            placeholder="点击选择用户"
            :value="hqUserList"
          >
            &lt;!&ndash;<a-select-option v-for="(item,index) in hqUserSelectList" :key="item.name">
              {{ item.name }}
            </a-select-option>&ndash;&gt;
          </a-select>
          <a-button type="primary" @click="handleHqUserSelect" icon="search" style="margin-left: 8px">选择</a-button>
          <a-button type="primary" @click="hqUserSelectReset" icon="reload" style="margin-left: 8px">清空</a-button>
          <span>（如果不指定则按照系统默认）</span>

        </a-list-item> -->
            <!--        <a-list-item style="line-height: 32px" :hidden="!checkedCc">
          <span>抄送给：</span>
          &lt;!&ndash;<a-input style="width: 200px;" v-model="model.ccUserRealNames"></a-input>&ndash;&gt;
          <a-select style="width: 300px;"
                    mode="multiple"
                    placeholder="点击选择按钮"
                    :value="ccUserList"
          >
            &lt;!&ndash;<a-select-option v-for="(item,index) in ccUserSelectList" :key="item.name">
              {{ item.name }}
            </a-select-option>&ndash;&gt;
          </a-select>
          <a-button type="primary" @click="handleCcUserSelect" icon="search" style="margin-left: 8px">选择</a-button>
          <a-button type="primary" @click="ccUserSelectReset" icon="reload" style="margin-left: 8px">清空</a-button>
        </a-list-item>-->
          </template>
        </a-list>
        <div style="margin-top:20px;text-align:center" v-if="model.isSubmit == '1'">
          <a-button type="primary" @click="handleAgreeProcessComplete()">确认</a-button>
        </div>
        <!-- 流转按钮 -->
        <div style="margin-top:20px;text-align:center" v-else>
          <!-- <template v-if="model.processModel==1">
        <template v-for="(item,index) in resultObj.transitionList">
           <a-button type="primary" @click="handleProcessComplete(item.nextnode)">{{ item.Transition }}</a-button>
          </template>
        </template> -->
          <template v-if="!currTask.suspendFlag">
            <template v-if="currTask.taskClaimFlag">
              <a-button @click="handleClaim()" type="primary" icon="caret-right">签收</a-button>
            </template>
            <template v-else-if="this.model.processModel !== 3 && this.model.processModel !== 4">
              <template v-for="(item, index) in resultObj.transitionList">
                <template v-if="item.Transition == '同意'">
                  <a-button type="primary" @click="handleProcessComplete(item.nextnode)" icon="check">{{ item.Transition }}</a-button>
                </template>
                <template v-else>
                  <a-button type="primary" @click="handleProcessComplete(item.nextnode)" >{{ item.Transition }}</a-button>
                </template>
              </template>
              <a-button @click="handleReject()"   icon="rollback" >退回（发起人）</a-button>
              <!--<a-button @click="selectEntruster()" type="primary" icon="user">委托</a-button>-->
              <a-button @click="handleSuspend()"  icon="lock">挂起</a-button>

            </template>
            <template v-else-if="this.model.processModel === 3 || this.model.processModel === 4">
              <a-button type="primary" @click="handleManyProcessComplete()">确认提交</a-button>
            </template>
          </template>
          <template v-else>
            <a-button @click="handleActive()" type="primary" icon="unlock">解挂</a-button>
          </template>
        &nbsp;&nbsp;
          <span style="color: red" v-if="currTask.suspendFlag">当前流程已挂起，需要进行解挂，再进行办理！</span>
        </div>
        <br>
      </a-card>

      <select-user-modal ref="selectHqUserModal" @selectFinished="selectHqUserOK"></select-user-modal>
      <select-user-modal ref="selectCcUserModal" @selectFinished="selectCcUserOK"></select-user-modal>
    </a-spin>
    <biz-task-select-entruster-modal
      ref="selectEntrusterModal"
      @selectFinished="handleEntruster"></biz-task-select-entruster-modal>
    <j-proview :previewImg="previewImg"></j-proview>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import { getAction, getFileAccessHttpUrl, putAction } from '@/api/manage'
  import SelectUserModal from './SelectUserModal';
  import AListItem from 'ant-design-vue/es/list/Item';
  import { initDictOptions } from '@/components/dict/JDictSelectUtil'
  import JEllipsis from '../../../../../components/jeecg/JEllipsis.vue';
  import JUpload from '../../../../../components/jeecg/JUpload'
  import BpmBizTaskOptModal from '@/views/modules/bpmbiz/common/BpmBizTaskOptModal.vue';
  import BizTaskSelectEntrusterModal from '@/views/modules/bpmbiz/common/BizTaskSelectEntrusterModal.vue';
  import BizDynamicLink from '@/views/modules/bpmbiz/BizDynamicLink.vue';
  import jProview from '@/components/jeecg/jProview'
  export default {
    components: {
      JUpload,
      JEllipsis,
      AListItem,
      BpmBizTaskOptModal,
      BizTaskSelectEntrusterModal,
      BizDynamicLink,
      SelectUserModal,
      jProview
    },
    name: 'TaskModule',
    props: ['path', 'formData', 'isValFormRes'],
    data() {
      return {
        url: {
          getProcessTaskTransInfo: '/api/erpmng/act/task/getProcessTaskTransInfo',
          processComplete: '/api/erpmng/act/task/processNewComplete',
          rejectProcess: '/api/erpmng/act/task/rejectProcess',
          upload: window._CONFIG['domianURL'] + '/sys/common/upload',
          taskEntrust: '/api/erpmng/act/task/taskEntrust',
          suspend: '/api/erpmng/act/processInstance/suspend',
          restart: '/api/erpmng/act/processInstance/restart'
        },

        previewImg: {
          imgList: [], // 所有图片数组
          index: 0, // 当前点击的图片的索引
          infinite: true, // 是否可以循环切换
          popup: false // 弹窗的显示隐藏
        },
        headers: {},
        resultObj: {},
        checkedNext: false,
        checkedReject: false,
        checkedCounterSign: false,
        transition:[],
        hqUserSelectList:[],
        ccUserSelectList:[],
        remarksDictOptions:[],
        currTask: {},
        isValForm: '1',
        model: {
          bizTaskList: [],
          taskId: '',
          isSubmit: '',
          nextnode: '',
          nextCodeCount: '',
          reason: '',
          processModel: 1,
          rejectModelNode: '',
          nextUserName: '',
          nextUserId: '',
          ccUserIds: '',
          ccUserRealNames: '',
          fileList: ''
        },
        bodyStyle: {
          padding: '10px'
        },
        checkedCc: false,
        fileList: [],
        loading: false
      }
    },
    computed: {
      stepIndex: function () {
        if (this.resultObj.bpmLogListCount > 3) {
          return this.resultObj.bpmLogStepListCount + 1;
        }
        return this.resultObj.bpmLogStepListCount;
      },

      hqUserList: function() {
        console.log('hq user select ', this.hqUserSelectList);
        var names = [];
        var ids = [];
        for (var a = 0; a < this.hqUserSelectList.length; a++) {
          names.push(this.hqUserSelectList[a].realname);
          ids.push(this.hqUserSelectList[a].username);
        }
        this.model.counterSignUserId = ids.join(",");
        this.model.counterSignUserName = names.join(",");
        return names;
      },
      ccUserList: function() {
        console.log('cc user select ', this.ccUserSelectList);
        var names = [];
        var ids = [];
        for (var a = 0; a < this.ccUserSelectList.length; a++) {
          names.push(this.ccUserSelectList[a].realname);
          ids.push(this.ccUserSelectList[a].username);
        }
        this.model.ccUserIds = ids.join(',');
        this.model.ccUserRealNames = names.join(',');
        return names;
      }
    },
    methods: {
      // 签收
      handleClaim() {
        var that = this;
        var params = { taskId: this.currTask.id };// 查询条件
        this.$confirm({
          title: '确认签收吗',
          content: '是否签收该任务?',
          onOk: function () {
            that.confirmLoading = true;
            putAction(that.url.claim, params).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('complete', {
                  model: that.model
                });
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        });
      },
      handleChangeSelect (value) {
        this.model.reason = value;
      },
      initValForm() {
        console.log('------------------------------------this.formData', this.formData)
        // 查看表单验证必填项
        this.isValForm = this.formData.isValForm
      },
      initDictConfig() {
        // 初始化字典 - 性别
        initDictOptions('approval_remarks').then((res) => {
          if (res.success) {
            this.remarksDictOptions = res.result;
          }
        });
      },
      getFileDownloadUrl: function (path) {
        return getFileAccessHttpUrl(path);
      },
      // 此方法已作废
      handleChange2(info) {
        this.fileList = [];
        let fileList = info.fileList;
        // fileList = fileList.slice(-2);
        fileList = fileList.map((file) => {
          if (file.response) {
            file.url = file.response.message;
          }
          return file;
        });
        fileList = fileList.filter((file) => {
          console.log('-----fileList response-----', file.response);
          if (file.response) {
            return file.response.success === true;
          }
          return false;
        }).map((file) => {
          var fileJson = {
            fileName: file.name,
            filePath: file.url,
            fileSize: file.size
          };
          this.fileList.push(fileJson);
        });
        this.model.fileList = JSON.stringify(this.fileList)
        console.log('-----fileList-----', this.model.fileList);
      },
      handleCheckedNextChange(e) {
        this.checkedNext = e.target.checked;
        this.hqUserSelectReset();
      },
      handleCheckedCounterSign(e) {
        this.checkedCounterSign= e.target.checked;
        if(this.checkedCounterSign){
          this.$set(this.model,"processModel",4);
        }else{
          this.hqUserSelectReset();
          this.$set(this.model,"processModel",1);
        }

      },
      handleCheckedCcChange(e) {
        this.checkedCc = e.target.checked;
        this.ccUserSelectReset();
      },
      handleCheckedRejectNode(e) {
        this.checkedReject = e.target.checked;
        if (this.checkedReject) {
          this.$set(this.model, 'processModel', 3);
        } else {
          this.$set(this.model, 'processModel', 1);
        }
      },
      completeProcess() {
        this.visible = false;
        this.$emit('ok');
      },
      getProcessTaskTransInfo(formData) {
        var params = { taskId: formData.taskId };// 查询条件
        this.loading = true;
        getAction(this.url.getProcessTaskTransInfo, params).then((res) => {
          if (res.success) {
            console.log('流程流转信息', res);
            this.resultObj = res.result;
          }
          this.loading = false;
        }).finally(() => {
          this.loading = false;
        })
      },
      handleProcessComplete (nextnode) {
        const that = this;

        if (this.model.processModel === 3) {
          if (!this.model.reason || this.model.reason.length == 0) {
            this.$message.warning('请填写处理意见');
            return
          }
          if (!this.model.rejectModelNode || this.model.rejectModelNode.length === 0) {
            this.$message.warning('请选择退回节点');
            return
          }
        }
        if (this.model.processModel === 4) {
          if (!this.model.counterSignUserId) {
            this.$message.warning("请选择加签审批人");
            return
          }
        }
        console.log('this.isValFormRes', this.isValFormRes)
        console.log('this.formData.isSubmit', this.formData.isSubmit)
        if (this.isValFormRes === '1' && this.formData.isValForm === '1' && this.model.processModel !== 3) {
          this.$message.warning('请完善表单后并提交');
          return
        }
        console.log(this.formData,'this.formData')
        console.log(this.model.processModel,'this.processModel')
        if (nextnode) {
          this.model.nextnode = nextnode;
        }
        console.log('流程办理数据：', this.model);
        var method = 'post';
        this.$confirm({
          title: '提示',
          content: '确认提交审批吗?',
          onOk: function() {
            if (!that.model.reason || that.model.reason.length == 0) {
              that.model.reason = '同意';
            }
            that.model.method = 'post'
            that.model.bizTaskList = '[]'
            that.model.fileList = JSON.stringify(that.fileList)
            that.$emit('complete', {
              url: that.url.processComplete,
              model: that.model
            });
          }
        });
      },
      /**
       * 退回
       */
      handleReject () {
        const that = this;
        if (!this.model.reason || this.model.reason.length == 0) {
          this.$message.warning('请填写处理意见');
          return
        }
        console.log('流程办理数据：', this.model);
        this.$confirm({
          title: '提示',
          content: '确认退回至发起人吗?',
          onOk: function() {
            that.model.bizTaskList = '[]'
            that.model.method = 'put'
            that.model.fileList = JSON.stringify(that.fileList)
            that.$emit('complete', {
              url: that.url.rejectProcess,
              model: that.model
            });
          }
        });
      },
      // 委托
      selectEntruster() {
        this.$refs.selectEntrusterModal.select();
        this.$refs.selectEntrusterModal.title = '选择委托人';
      },
      handleEntruster(data) {
        var that = this;
        var params = {
          taskId: this.currTask.id,
          taskAssignee: data.username
        };// 查询条件
        console.log('委托', params)
        putAction(that.url.taskEntrust, params).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.$emit('complete', {
              model: that.model
            });
          } else {
            that.$message.warning(res.message);
          }
        })
      },
      // 挂起
      handleSuspend() {
        var that = this;
        console.log('that.model', that.model)
        var params = { 'processInstanceId': that.model.procInsId };
        this.$confirm({
          title: '确认挂起吗',
          content: '是否挂起该任务?',
          onOk: function () {
            that.confirmLoading = true;
            getAction(that.url.suspend, params).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('complete', {
                  model: that.model
                });
              } else {
                that.$message.warn(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        });
      },
      // 激活
      handleActive() {
        var that = this;
        var params = { 'processInstanceId': this.model.procInsId };
        this.$confirm({
          title: '确认解挂吗',
          content: '是否解挂该任务?',
          onOk: function () {
            that.confirmLoading = true;
            getAction(that.url.restart, params).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('complete', {
                  model: that.model
                });
              } else {
                that.$message.warn(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        });
      },
      handleManyProcessComplete() {
          if (this.model.processModel == 3) {
            if (!this.model.rejectModelNode || this.model.rejectModelNode.length == 0) {
              this.$message.warning('请选择退回节点');
              return
            }
          }
          this.handleProcessComplete();
      },
      handleAgreeProcessComplete() {
          this.model.reason === '同意'
          this.handleProcessComplete();
      },
      selectHqUserOK: function(data) {
        this.hqUserSelectList = data;
      },
      handleHqUserSelect: function() {
        this.$refs.selectHqUserModal.add();
      },
      hqUserSelectReset() {
        this.hqUserSelectList = [];
      },
      selectCcUserOK: function(data) {
        this.ccUserSelectList = data;
      },
      handleCcUserSelect: function() {
        this.$refs.selectCcUserModal.add();
      },
      ccUserSelectReset() {
        this.ccUserSelectList = [];
      },
      showLoading() {
        this.loading = true;
      },
      hideLoading() {
        this.loading = false;
      },

      // 点击查看
      onPreview (file) {
        console.log('-----file----', file)
        var typeName = file.fileName.split('.')[file.fileName.split('.').length - 1]
        var imgArr = ['gif', 'jpg', 'png', 'bmp', 'jpeg', 'webp']
        console.log('typeName', typeName)
        var filePath = this.getFileDownloadUrl(file.filePath)
        console.log('-----filePath----', filePath)

        if (imgArr.indexOf(typeName) > 0) {
          this.previewImage = filePath;
          this.previewImg = {
            imgList: [this.previewImage], // 所有图片数组
            index: 0, // 当前点击的图片的索引
            infinite: true, // 是否可以循环切换
            popup: true // 弹窗的显示隐藏
          }
        } else {
          // console.log(this.fileInfo)
          // let url = this.fileInfo.response.message
          let fileUrl = filePath
          let Base64 = require('js-base64').Base64
          window.open(window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(Base64.encode(fileUrl)));
        }
      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = { 'Authorization': token };
      console.log('任务办理组件数据：', this.formData);
      this.model.taskId = this.formData.taskId;
      this.model.procInsId = this.formData.procInsId;
      this.model.isSubmit = this.formData.isSubmit
      this.currTask = this.formData.bizTaskList[0];
      this.getProcessTaskTransInfo(this.formData);
      this.initDictConfig();
      this.initValForm()
    }
  }
</script>

<style scoped>
  .task-info {
    margin: 20px 0;
  }

  .task-title {
    font-weight: bold;
  }

  .task-date {
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .task-date span {
   /* color: #ff6d75;*/
  }

  .ant-steps-item-description {
    max-width: 200px !important;
  }
  .ant-btn-danger {
    background-color: #ff4d4f !important;
  }
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px
  }
</style>